<!-- directive:title NG指令详解 -->
<!-- directive:breadcrumb NG指令详解 -->
<div class="panel-body">
    <div class='panel panel-default'>
        <div class='panel-heading'> ng-if 引起的数据绑定问题 </div>
        <div class='panel-body'>
            <article class="docs-content">
                <p> 最近发现自己写的自定义指令与ng-if 一起使用的时候会出现双向绑定失败的问题，如果不和ng-if 一起使用的话就没有问题。国际惯例「谷歌」，最终在stackoverflow 上找到了原因。</p>
                <p> ng-if 和其它指令一样，都会创建一个子scope；所以ng-model 绑定的实际上是这个新创建的scope。要想避免这种绑定错误，我们可以加个$parent 前缀；或者将我们要绑定的数据放进一个对象里面。</p>
                <p> 测试一下结果</p>
                <p>
                    开关::控制下面的ngif
                    //testa=<code>{{testa}}</code>
                    <input type="checkbox" ng-model="testa" />
                </p>
                <p>
                    测试::ng-if="!testa"
                    //ngif=<code>{{testb}}</code>
                    //testb=<code>{{testb}}</code>
                    <input type="checkbox" ng-if="!testa" ng-model="testb" />
                    <span class="text-danger">复选框失去了与外界的关联</span>
                </p>
                <p>
                    测试::ng-if="!testa"
                    //ngif=<code>{{testa}}</code>
                    //testc=<code>{{testc}}</code>
                    <input type="checkbox" ng-if="!testa" ng-model="testc" />
                    <span class="text-danger">复选框失去了与外界的关联</span>
                </p>
                <p>
                    测试::ng-if="!testa"
                    //ngif=<code>{{testa}}</code>
                    //obj.test=<code>{{obj.test}}</code>
                    <input type="checkbox" ng-if="!testa" ng-model="obj.test" />
                    <span class="text-info">复选框与外界有关联</span>
                </p>
                <p class="text-danger">双向绑定失败</p>
                <p> 如果重新渲染的是一套对象 则互相联系绑定</p>
                <p>
                    测试::ng-if="!testa"
                    //ngif=<code>{{testb}}</code>
                    //testb=<code>{{testb}}</code>
                    <span ng-if="!testa">
                        <input type="checkbox" ng-model="testb" />
                        //testb=<code>{{testb}}</code>
                    </span>
                    <span class="text-danger">复选框和变量值失去了与外界的关联</span>
                </p>
                <p><a href="https://stackoverflow.com/questions/18342917/angularjs-ng-model-doesnt-work-inside-ng-if">https://stackoverflow.com/questions/18342917/angularjs-ng-model-doesnt-work-inside-ng-if</a></p>
            </article>
        </div>
    </div>
</div>


